<template>
    <el-dialog v-model="dialogVisible" title="添加" width="50%" draggable>
        <div>
            <s-form :configs="configs" :data="data" :rules="rules"></s-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'

defineOptions({
    name: 'd-Form',
})

const props = defineProps({
    rules: {
        type: Object,
        required: true
    },
    data: {
        type: Object,
        required: true
    },
    configs: {
        type: Array<any>,
        required: true
    },
})
const dialogVisible = ref(false)

const open = () => {
    dialogVisible.value = true
}
defineExpose({
    open
})
</script>
